<template>
  <!-- 地图+导航页面 -->
  <div>
    <router-view></router-view>
    <div class="nav">
      <van-tabbar v-model="active">
        <van-tabbar-item
          v-for="item of nav"
          :key="item.name"
          :name="item.name"
          :icon="item.icon"
          :to="item.to"
          >{{ item.label }}</van-tabbar-item
        >
      </van-tabbar>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const nav = [
  { name: 'home', icon: 'location-o', to: '/map', label: '地图' },
  { name: 'search', icon: 'records', to: '/report', label: '报告路况' },
  { name: 'friends', icon: 'contact', to: '/user', label: '我的' },
]
const active = ref('home')
</script>

<style>
.nav {
  border-radius: 10px;
}
</style>
